import React, { Component } from "react";
import { HashRouter, Switch, Route, Link } from "react-router-dom";
import Experience from "./Experience";
import Synopsis from "./Synopsis";
import Cultrue from "./Cultrue";
import Join from "./Join";
import News from "./News";
import Team from "./Team";
import Concern from "./Concern";
import Contact from "./Contact";


import "../css/Home.css";
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: "",
    };
  }
  componentDidMount() {
    console.log(this.props.location);
    if (this.props.location.state) {
      this.setState({
        user: this.props.location.state.user,
      });
      console.log(this.state.user);
    }
  }
  render() {
    return (
      <div className="miui_content">
        <div className="head">
          <div className="head_list">
            <ul className="head_nav">
              <li>小米商城</li>
              <li>MIUI</li>
              <li>loT</li>
              <li>云服务</li>
              <li>天星数科</li>
              <li>有品</li>
              <li>小爱开放平台</li>
              <li>企业团购</li>
              <li>资质证照</li>
              <li>协议规则</li>
              <li>下载App</li>
              <li>智能生活</li>
              <li>Select Location</li>
            </ul>
            <ul className="head_login">
              <li>
                <i
                  onClick={() => {
                    console.log(this.props);
                    this.props.history.push("/login");
                  }}
                >
                  登录
                </i>
              </li>
              <li>注册</li>
              <li>消息通知</li>
              <li>用户：{this.state.user}</li>
            </ul>
          </div>
        </div>
        <HashRouter>
          <div className="crumbs">
            <Link>首页</Link>
            &emsp; / &emsp;
            <Link>关于小米</Link>
            &emsp; / &emsp;
          </div>
          <div className="list">
            <ul>
              <li>
                <Link to={`/${"公司简介"}`}>公司简介</Link>
              </li>
              <li>
                <Link to={`/team/${"管理团队"}`}>管理团队</Link>
              </li>
              <li>
                <Link to={`/cultrue/${"小米文化"}`}>小米文化</Link>
              </li>
              <li>
                <Link to={`/experience/${"发展经历"}`}>发展经历</Link>
              </li>
              <li>
                <Link to={`/news/${"小米新闻"}`}>小米新闻</Link>
              </li>
              <li>
                <Link to={`/join/${"加入小米"}`}>加入小米</Link>
              </li>
              <li>
                <Link to={`/concern/${"投资者关系"}`}> 投资者关系</Link>
              </li>
              <li>
                <Link to={`/contact/${"联系我们"}`}>联系我们</Link>
              </li>
            </ul>
            <div>
              <Switch>
              <Route path="/contact/:name" component={Contact} />
              <Route path="/concern/:name" component={Concern} />
              <Route path="/team/:name" component={Team} />
              <Route path="/news/:name" component={News} />
              <Route path="/join/:name" component={Join} />
              <Route path="/cultrue/:name" component={Cultrue} />
                <Route path="/experience/:name" component={Experience} />
                <Route path="/:name" component={Synopsis} />
              </Switch>
            </div>
          </div>
        </HashRouter>
      </div>
    );
  }
}

export default Home;
